<template>
	<div class="add-FlowDesign-container">
		<el-dialog title="新增流程图" v-model="isShowDialog" :fullscreen="true" destroy-on-close>
			<bpmn-modeler ref="refNode" :xml="ruleForm.xml"
				:is-view="false" @save="save" :create-flag="true"/>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue';
import { add, FlowDesign } from '/@/api/flow/flowDesign';
import { submitForm } from '/@/utils/form';
import { rule } from './rule.ts';
import bpmnModeler from '/@/components/bpmn/index'

export default {
	name: 'addFlowDesign',
	components: { bpmnModeler },
	setup() {
		const form = ref();
		const state = reactive({
			isShowDialog: false,
			ruleForm: {
				flowId: '', // 流程id
				name: '', // 流程名称
				xml: '', // xml
				svg: '', // svg
			} as FlowDesign,
			rules: rule
		});

		let success: Function;

		// 打开弹窗
		const openDialog = (handler: Function) => {
			state.isShowDialog = true;
			success = handler
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const save = (data: FlowDesign) => {
			add(data).then(() => {
				closeDialog();
				success()
			})
		};

		return {
			openDialog,
			closeDialog,
			onCancel,
			form,
			submitForm,
			save,
			...toRefs(state),
		};
	},
};
</script>